* {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  font-size: 0.95rem;
}

.no-grow {
  flex-grow: 0;
}

em {
  font-style: normal;
}

#app {
  font-family: "Lato", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: white;
  background-color: transparent;
}

.chat-window {
  position: absolute;
  top: 1%;
  left: 35px;
  width: 38%;
  height: 530px;
  max-width: 550px;
  background-color: rgba(255, 255, 255, 0);
  -webkit-animation-duration: 0.5s;
}

.chat-messages {
  max-height: 72%;
  font-size: 1.4rem;
  overflow-x: hidden;
  overflow-y: hidden;
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
}

.chat-input {
  font-size: 1.65vh;
  position: absolute;
  top: 17.08%;
  left: 35px;
  width: 38%;
  max-width: 610px;
  box-sizing: border-box;
}

.prefix {
  font-size: 1.8vh;
  position: absolute;
  margin-top: 0.8%;
  margin-left: 1.5%;
  left: 0.208%;
}

textarea {
  font-size: 1.5vh;
  display: block;
  box-sizing: border-box;
  padding-top: 1.1%;
  padding-left: 5.4%;
  padding-bottom: 1.4%;
  padding-right: 1.6%;
  color: rgb(255, 255, 255);
  background-color: rgba(44, 62, 80, 0.5);
  width: 65%;
  border: 2px solid rgba(92, 117, 160, 0.9);
  border-radius: 3px;
  height: 3.15%;
  overflow: hidden;
  text-overflow: ellipsis;
  resize: none;
}

textarea:focus,
input:focus {
  outline: none;
}

.msg {
  margin-bottom: 5px;
}

.suggestions {
  list-style-type: none;
  padding: 5px;
  padding-left: 27px;
  font-size: 0.9rem;
  box-sizing: border-box;
  color: white;
  background-color: rgba(55, 69, 95, 0.5);
  border: 0px solid rgba(92, 117, 160, 0.9);
  width: 65%;
}

.help {
  margin-top: -10px;
  color: #b0bbbd;
}

.disabled {
  margin-top: -10px;
  color: #b0bbbd;
}

.suggestion {
  margin-bottom: 0.5px;
}

.chat-message {
  display: inline-block !important;
  padding: 0.3vw;
  padding-top: 0.3vw;
  padding-bottom: 0.3vw;
  margin: -1px;
  margin-left: 0.2vw;  
  border-radius: 3px;
  background-color: rgba(73, 147, 221, 0.5);
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  word-break: break-word;
}

.chat-message.body {
  margin-top: 5px;
}

.chat-message-system {
  display: inline-block !important;
  padding: 0.3vw;
  padding-top: 0.3vw;
  padding-bottom: 0.3vw;
  margin: -1px;
  margin-left: 0.2vw;  
  border-radius: 3px;
  background-color: rgba(184, 41, 41, 0.5);
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  word-break: break-word;
}

.chat-message-emergency {
  display: inline-block !important;
  padding: 0.3vw;
  padding-top: 0.3vw;
  padding-bottom: 0.3vw;
  margin: -1px;
  margin-left: 0.2vw;  
  border-radius: 3px;
  background-color: rgba(224, 50, 50, 0.605);
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  word-break: break-word;
}

.chat-message-report {
  display: inline-block !important;
  padding: 0.3vw;
  padding-top: 0.3vw;
  padding-bottom: 0.3vw;
  margin: -1px;
  margin-left: 0.2vw;  
  border-radius: 3px;
  background-color: rgba(163, 19, 19, 0.507);
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  word-break: break-word;
}

.chat-message-ooc {
  display: inline-block !important;
  padding: 0.3vw;
  padding-top: 0.3vw;
  padding-bottom: 0.3vw;
  margin: -1px;
  margin-left: 0.2vw;  
  border-radius: 3px;
  background-color: rgba(128, 128, 128, 0.555);
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  word-break: break-word;
}

.chat-message-grab {
  display: inline-block !important;
  padding: 0.3vw;
  padding-top: 0.3vw;
  padding-bottom: 0.3vw;
  margin: -1px;
  margin-left: 0.2vw;  
  border-radius: 3px;
  background-color: rgba(255, 255, 0, 0.5);
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  word-break: break-word;
}

.chat-message-polantas {
  display: inline-block !important;
  padding: 0.3vw;
  padding-top: 0.3vw;
  padding-bottom: 0.3vw;
  margin: -1px;
  margin-left: 0.2vw;  
  border-radius: 3px;
  background-color:rgba(0, 89, 179, 0.5);
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  word-break: break-word;
}

.chat-message-pemerintah {
  display: inline-block !important;
  padding: 0.3vw;
  padding-top: 0.3vw;
  padding-bottom: 0.3vw;
  margin: -1px;
  margin-left: 0.2vw;  
  border-radius: 3px;
  background-color:rgba(255, 0, 0, 0.5);
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  word-break: break-word;
}


.chat-message-rs {
  display: inline-block !important;
  padding: 0.3vw;
  padding-top: 0.3vw;
  padding-bottom: 0.3vw;
  margin: -1px;
  margin-left: 0.2vw;  
  border-radius: 3px;
  background-color:rgba(255, 0, 0, 0.5);
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  word-break: break-word;
}

.chat-message-jel {
  display: inline-block !important;
  padding: 0.3vw;
  padding-top: 0.3vw;
  padding-bottom: 0.3vw;
  margin: -1px;
  margin-left: 0.2vw;  
  border-radius: 3px;
  background-color:rgba(255, 136, 0, 0.5);
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  word-break: break-word;
}

.chat-message-polisi {
  display: inline-block !important;
  padding: 0.3vw;
  padding-top: 0.3vw;
  padding-bottom: 0.3vw;
  margin: -1px;
  margin-left: 0.2vw;  
  border-radius: 3px;
  background-color:rgba(2, 10, 85, 0.5);
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  word-break: break-word;
}


.chat-message-pedagang {
  display: inline-block !important;
  padding: 0.3vw;
  padding-top: 0.3vw;
  padding-bottom: 0.3vw;
  margin: -1px;
  margin-left: 0.2vw;  
  border-radius: 3px;
  background-color:rgba(202, 104, 12, 0.5);
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  word-break: break-word;
}


.chat-message-montir {
  display: inline-block !important;
  padding: 0.3vw;
  padding-top: 0.3vw;
  padding-bottom: 0.3vw;
  margin: -1px;
  margin-left: 0.2vw;  
  border-radius: 3px;
  background-color:rgba(65, 165, 0, 0.5);
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  word-break: break-word;
}

.chat-message-meca {
  display: inline-block !important;
  padding: 0.3vw;
  padding-top: 0.3vw;
  padding-bottom: 0.3vw;
  margin: -1px;
  margin-left: 0.2vw;  
  border-radius: 3px;
  background-color:rgba(79, 167, 21, 0.5);
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  word-break: break-word;
}

.chat-message-ad {
  display: inline-block !important;
  padding: 0.3vw;
  padding-top: 0.3vw;
  padding-bottom: 0.3vw;
  margin: -1px;
  margin-left: 0.2vw;  
  border-radius: 3px;
  background-color:rgba(230, 184, 0, 0.5);
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  word-break: break-word;
}

.chat-message-taxi {
  display: inline-block !important;
  padding: 0.3vw;
  padding-top: 0.3vw;
  padding-bottom: 0.3vw;
  margin: -1px;
  margin-left: 0.2vw;  
  border-radius: 3px;
  background-color: rgba(6, 111, 0, 0.603);
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  word-break: break-word;
}

.chat-message-darktweet {
  display: inline-block !important;
  padding: 0.3vw;
  padding-top: 0.3vw;
  padding-bottom: 0.3vw;
  margin: -1px;
  margin-left: 0.2vw;  
  border-radius: 3px;
  background-color: rgba(50, 147, 179, 0.541);
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  word-break: break-word;
}

.chat-message-do {
  display: inline-block !important;
  padding: 0.3vw;
  padding-top: 0.3vw;
  padding-bottom: 0.3vw;
  margin: -1px;
  margin-left: 0.2vw;  
  border-radius: 3px;
  background-color: rgba(0, 0, 255, 0.5);
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  word-break: break-word;
}